<template>
    <div class="handInvoiceAdd">
        <div class="head">
            <p class="colCLas"></p>
            <p class="info">手工开具发票</p>
        </div>

        <el-button @click="addVoice" type="primary" size="small" style="margin-bottom: 6px;">新增</el-button>


        <tableList
            :showIndex="true"
            :data="listDetails"
            border
            :heightMin="90"
            :keySet="keySet"
            :autoHeight="true"
            :tableData="listDetails"
            :handlerShow="true"

            :paginationShow="true"
            :pageNumber="pages.current"
            :pageSize="pages.size"
            :total="pages.total"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
            handlerFixed="right"
        >
            <template #handler="{row}">
                <span v-if="isShow(row)" class="worldBlueBtn" @click="startBus(row)">办理</span>
            </template>
        </tableList>

        <addVoiceDialog
            ref="addVoiceDialogRef"
            v-if="addVoiceDialogShow"
            @voiceDialogFn="voiceDialogFn"
        ></addVoiceDialog>
        <!-- <lookFlow
            ref="lookFlowRef"
            v-if="flowDialog"
            @flowDialogFn="flowDialogFn"
            :flowJson="flowJson"
        ></lookFlow> -->

    </div>
</template>

<script>
import mixinTable from '@/mixin/mtable.js'
import tableList from '@/components/tableList/index.vue'
import addVoiceDialog from './addVoiceDialog.vue'
import { checkBeforeAdd, getProcessList } from '@/api/handInvoiceAdd.js'

export default {
    name: 'handInvoiceAdd',
    mixins: [mixinTable],
    data() {
        return {
            bigNumber: '9007199254740990',
            flowJson: {
                nodes: [
                    {
                        id: 'node1',
                        shape: 'rect',
                        x: 200,
                        y: 20,
                        width: 100,
                        height: 40,
                        label: '申请',
                        attrs: {
                            // body 是选择器名称，选中的是 rect 元素
                            body: {
                                stroke: '#8f8f8f',
                                strokeWidth: 1,
                                fill: '#fff',
                                rx: 6,
                                ry: 6,
                            },
                        },
                    },
                    {
                        id: 'node2',
                        shape: 'rect',
                        x: 200,
                        y: 180,
                        width: 100,
                        height: 40,
                        label: '手工审核中',
                        attrs: {
                            body: {
                                stroke: '#8f8f8f',
                                strokeWidth: 1,
                                fill: '#fff',
                                rx: 6,
                                ry: 6,
                            },
                        },
                    },
                    {
                        id: 'node3',
                        shape: 'rect',
                        x: 200,
                        y: 280,
                        width: 100,
                        height: 40,
                        label: '审核结果',
                        attrs: {
                            body: {
                                stroke: '#8f8f8f',
                                strokeWidth: 1,
                                fill: '#fff',
                                rx: 6,
                                ry: 6,
                            },
                        },
                    },
                    {
                        id: 'node4',
                        shape: 'rect',
                        x: 200,
                        y: 380,
                        width: 100,
                        height: 40,
                        label: '管理岗提交',
                        attrs: {
                            body: {
                                stroke: '#8f8f8f',
                                strokeWidth: 1,
                                fill: '#fff',
                                rx: 6,
                                ry: 6,
                            },
                        },
                    },
                    {
                        id: 'node5',
                        shape: 'rect',
                        x: 200,
                        y: 480,
                        width: 100,
                        height: 40,
                        label: '结果',
                        attrs: {
                            body: {
                                stroke: '#8f8f8f',
                                strokeWidth: 1,
                                fill: '#fbec88',
                                rx: 6,
                                ry: 6,
                            },
                        },
                    },
                ],
                edges: [
                    {
                        shape: 'edge',
                        source: 'node1',
                        target: 'node2',
                        // label: 'x6',
                        attrs: {
                            // line 是选择器名称，选中的边的 path 元素
                            line: {
                                stroke: '#8f8f8f',
                                strokeWidth: 1,
                            },
                        },
                    },
                    {
                        shape: 'edge',
                        source: 'node2',
                        target: 'node3',
                        // label: 'x6',
                        attrs: {
                            // line 是选择器名称，选中的边的 path 元素
                            line: {
                                stroke: '#8f8f8f',
                                strokeWidth: 1,
                            },
                        },
                    },
                    {
                        shape: 'edge',
                        source: 'node3',
                        target: 'node4',
                        // label: 'x6',
                        attrs: {
                            // line 是选择器名称，选中的边的 path 元素
                            line: {
                                stroke: '#8f8f8f',
                                strokeWidth: 1,
                            },
                        },
                    },
                    {
                        shape: 'edge',
                        source: 'node4',
                        target: 'node5',
                        // label: 'x6',
                        attrs: {
                            // line 是选择器名称，选中的边的 path 元素
                            line: {
                                stroke: '#8f8f8f',
                                strokeWidth: 1,
                            },
                        },
                    },
                ],
            },
            addVoiceDialogShow:false,
            flowDialog: false,
            listDetails: [],
            keySet: [
                {
                    label: '流程类型',
                    englishName: 'busTypeName',
                    width: '120'
                },
                {
                    label: '流程名称',
                    englishName: 'busName',
                    width: '250'

                },
                {
                    label: '流程编号',
                    englishName: 'busCode',
                    width: '250'

                },
                {
                    label: '流程状态',
                    englishName: 'businessStatusText',
                },
                {
                    label: '当前审批节点',
                    englishName: 'currentActivityName',
                    width: '200'
                },
                {
                    label: '当前处理人',
                    englishName: 'currentAssignee',
                },
                {
                    label: '发起人员',
                    englishName: 'createdBy',
                },
                {
                    label: '申请时间',
                    englishName: 'createdTime',
                    width: '200'
                },
            ],
        }
    },
    created() {
        this.getList()
    },
    methods: {
        isShow(row){
            if(row.currentActivity == 'root'){
                    return true
                }
            return false
        },
        startBus(val){
            this.loading = false;
            sessionStorage.setItem(
                'handleDetailInfo',
                JSON.stringify({
                    activeComNumber: '1',
                    titleInfo: '办理发票',
                    searchParams: {},
                    isLook: false ,
                    processId:val.id,
                    nodeId:val.currentActivity,
                    procInstId:val.procInstId,
                    templateId:val.templateId,

                    busType:val.busType || 'FLOW_SGKP',
                    busStatus:val.busStatus || '',
                    busId:val.id || '',

                })
            )


            this.addVoiceDialogShow = true;
            
            setTimeout(() => {
                this.$refs.addVoiceDialogRef.show()
            }, 100)

        },
        voiceDialogFn(val){
            this.addVoiceDialogShow = val || false;
            this.getList()
        },
        addVoice() {
            this.loading = false;
            sessionStorage.setItem(
                'handleDetailInfo',
                JSON.stringify({
                    activeComNumber: '1',
                    titleInfo: '办理发票',
                    searchParams: {},
                    busType:  'FLOW_SGKP',
                    busId:  '',
                })
            )

            checkBeforeAdd().then(
                ({ code, data, message }) => {
                    if (code == 200) {
                        this.addVoiceDialogShow = true;
                        setTimeout(() => {
                            this.$refs.addVoiceDialogRef.show('ADD')
                        }, 50)
                    }
                }
            )

            

            
        },
        showFlow() {
            this.flowDialog = true
            setTimeout(() => {
                this.$refs.lookFlowRef.show()
            }, 100)
        },
        flowDialogFn(val) {
            this.flowDialog = val
        },
        radioHandleCurrentChange(val) {
        },
        getList() {
            this.loading = true
            getProcessList(
                {
                   'busType': 'FLOW_SGKP',
                    "pageNo": this.pages.current,
                    "pageSize": this.pages.size,
                }
            ).then(
                ({ code, data }) => {
                    if (code == 200) {
                        this.loading = false
                        this.listDetails = data.records
                        this.pages.current = data.current
                        this.pages.size = data.size
                        this.pages.total = data.total
                    }
                }
            )
        }
    },
    components: {
        tableList,
        addVoiceDialog,
    },
}
</script>

<style lang = "scss" scoped>
@import '@/style/variables.scss';

.handInvoiceAdd {
    box-sizing: border-box;
    // padding: 10px;
    .head {
        display: flex;
        height: 18px;
        align-items: center;
        margin-bottom: 4px;
        margin-top: 4px;
        .colCLas {
            width: 4px;
            height: 100%;
            background-color: $allBg;
            margin-right: 12px;
        }
        .info {
            height: 100%;
            display: flex;
            align-items: center;
        }
    }
}

::v-deep .el-table__body tr.current-row > td {
    background-color: #fbec88 !important;
}
::v-deep .el-table__body tr.current-row > td.el-table__cell {
    background-color: #fbec88 !important;
}
</style>
